<template>
  <!--委外催收案件管理-->
  <section class="page system-parameter-manage">
    <data-form :model="queryModel" @handleResetForm="follFeedback" @onSearch="refreshData" autoSearch>
      <!--输入区域-->
      <template slot="inputs">
        <el-form-item label="借据号" prop="caseNumber">
          <el-input v-model="queryModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="批次号" prop="outBatch">
          <el-input v-model="queryModel.outBatch"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="queryModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="queryModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="queryModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-cascader v-model="queryModel.area" :options="$city.getCityData()" change-on-select clearable></el-cascader>
        </el-form-item>
        <el-form-item label="催收员" prop="collectorRealName">
          <el-input v-model="queryModel.collectorRealName"></el-input>
        </el-form-item>
        <el-form-item label="委外方" prop="outsourceId">
          <el-select v-model="queryModel.outsourceId" placeholder="请选择" clearable>
            <el-option v-for="item in outSourceList" :key="item.id" :label="item.outsName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件金额" prop="overdueAmount">
          <number-range v-model="queryModel.overdueAmount">
          </number-range>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select v-model="queryModel.overduePeriod" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="queryModel.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="行动代码" prop="followupBack">
          <el-select v-model="queryModel.followupBack" placeholder="所有" clearable>
            <el-option v-for="{name,id} in customDataDict.filter(v=>v.dataType==='FOLLOW_UP').filter(m=>m.name!=='行动代码')" :key="id" :label="name" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统来源" prop="sysCode">
          <el-select v-model="queryModel.sysCode" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('SysCode')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="queryModel.productName"></el-input>
        </el-form-item>
        <el-form-item label="案件流入时间" prop="followInTime">
          <el-date-picker type="daterange" :editable="false" v-model="queryModel.followInTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="委外时间" prop="outTimeDate">
          <el-date-picker v-model="queryModel.outTimeDate" type="daterange" :editable="false" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="委外到期时间" prop="outEndDate">
          <el-date-picker v-model="queryModel.outEndDate" type="daterange" :editable="false" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="跟进时间" prop="followUpTime">
          <el-date-picker v-model="queryModel.followUpTime" type="daterange" :editable="false" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="顾客类型" prop="customerCategory">
           <el-select v-model="queryModel.customerCategory" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('CustomerCategory')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="留案标志" prop="leaveCaseFlag">
          <el-select v-model="queryModel.leaveCaseFlag" placeholder="所有" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('CommonFlag')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box @onPageChange="refreshData" :data="collectionDataList" :selectionList.sync="selectionList" :page="pageService">
      <template slot="buttons">
        <el-button class="btn" @click="caseRecoveryClick" v-auth = "1013" >回收案件</el-button>
        <el-button class="btn" @click="caseStayClick" v-auth = "1014">留案</el-button>
        <el-button class="btn" @click="unCaseStayClick" v-auth = "1015">取消留案</el-button>
        <el-button class="btn" @click="importMobileUrgeClick" v-auth = "1016">导入电催跟进</el-button>
        <el-button class="btn" @click="importOutVisitClick" v-auth = "1017">导入外访跟进</el-button>
        <el-button class="btn" @click="importContactClick">导入联系人信息</el-button>
        <el-button class="btn" @click="exportCaseClick">导出案件</el-button>
        <el-button class="btn" @click="exportTemplateInfo('RECORD_MOBILE_URGE')">下载电催模板</el-button>
        <el-button class="btn" @click="exportTemplateInfo('RECORD_OUT_VISIT')">下载外访模板</el-button>
        <el-button class="btn" @click="exportTemplateInfo('RECORD_LINKMAN')">下载联系人模板</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column label="借据号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <a  @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="outBatch" label="批次号" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="outsName" label="委外方" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :formatter="(row)=>$filter.encryptPhone(row.mobileNo)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" :formatter="(row)=>$filter.encryptIDCardFour(row.idCard)" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="area" label="地区" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $city.getCityName(Number(row.area))" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="overdueAmount" label="案件金额(元)" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期阶段" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="sysCode" label="系统来源" :formatter="(row) => $filter.encryptSysCode(row.sysCode)" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <!-- <el-table-column prop="customerCategory" label="顾客类型" :formatter="(row) => $filter.dictConvert(row.customerCategory,'CustomerCategory')" :min-width="$helper.getColumnWidth(3)">
        </el-table-column> -->
        <el-table-column prop="userName" label="催收员" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="followInTime" label="案件流入时间" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <span>{{scope.row.followInTime | dateTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="caseAllocationTime" label="委外分配时间" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <span>{{scope.row.caseAllocationTime | dateTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="outEndDate" label="委外到期时间" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <span>{{scope.row.outEndDate | dateFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="followUpTime" label="跟进时间"  :formatter="(row) => $filter.dateTimeFormat(row.followUpTime)" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="followupBack" label="行动代码" :formatter="(row) => $filter.dictcustomConvert(row.followupBack)"  :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="leaveCaseFlag" label="留案标识" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            {{scope.row.leaveCaseFlag =='YES'?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="leaveDate" label="留案到期日期" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <span>{{scope.row.leaveDate | dateFormat}}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!--弹框-留案-->
    <el-dialog title="留案" @close="dialog.leaveCase = false;refreshData()" :visible.sync="dialog.leaveCase" :close-on-click-modal="false" :show-close="false">
      <leave-case @close="dialog.leaveCase=false;refreshData()" @refreshList="refreshData" :selectionList.sync="selectionList"></leave-case>
    </el-dialog>
    <el-dialog title="上传文件" @close="dialog.uploadFile = false;refreshData()" :visible.sync="dialog.uploadFile" :close-on-click-modal="false" :show-close="false">
      <file-upload ref="upload_case_import" :fileList.sync="fileList" :fileNumberLimit="1" :AllowExtension="['xlsx','xls']"></file-upload>
      <div class="btn-group">
        <el-button @click="commit">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Auth, Layout, Dependencies } from '~/core/decorator';
import DataForm from '~/components/common/data-form.vue';
import DataBox from '~/components/common/data-box.vue';
import NumberRange from '~/components/common/number-range.vue';
import leaveCase from '~/components/outsource-manage/collection-manage/leave-case.vue'; // 留案
import { Mutation, Getter, namespace, State } from 'vuex-class';
import { PageService } from '~/utils/page.service';
import { SortService } from '~/utils/sort.service';
import { OutsourceCollectionService } from '~/services/domain-service/outsource-collection-manage.service';
import FileUpload from '~/components/common/file-upload.vue';
import { CityService } from '~/utils/city.service';
import { OutsourceSettleManageService } from '~/services/domain-service/outsource-settle-manage.service';
import { SystemParamService } from "~/services/management-service/system-param.service";
import { OpenExecutionData } from "~/config/types";
import { ApplyType, CASE_CHANNEL, CASE_HALT_CATEGORY, } from '~/config/enum.config';
const CollectionExecutionModule = namespace('collection-execution');

// @Auth(1003)
@Layout('workspace')
@Component({
  components: {
    DataForm,
    DataBox,
    NumberRange,
    leaveCase,
    FileUpload,
  },
})
export default class CollectionManageIndex extends Vue {
  @Dependencies(OutsourceSettleManageService)
  private OutsourceSettleManageService: OutsourceSettleManageService;
  @Dependencies(OutsourceCollectionService)
  private outsourceCollectionService: OutsourceCollectionService;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(SystemParamService) private systemParamService: SystemParamService;
  @Dependencies(SortService) private sortService: SortService;
  @CollectionExecutionModule.Action private openCollectionExecution;
  @State private outSourceList;
  @State private customDataDict;

  private dialog: any = {
    leaveCase: false,
    uploadFile: false,
  };
  private fileList: any = [];

  private proinviceList: any[] = []; // 省
  private cityList: any[] = []; //市

  private queryModel: any = {
    outBatch: '',
    caseNumber: '',
    personalName: '',
    area: [],
    mobileNo: '',
    idCard: '',
    localAddress: '',
    currentCollector: '',
    outsourceId:'',
    overduePeriod: '',
    turnSource: '',
    sysCode: '',
    productName: '',
    proinviceCode: '',
    cityCode: '',
    followupBack:'',
    overdueAmount: {
      max: '',
      min: '',
    },
    overdueDays: {
      max: '',
      min: '',
    },
    collectorRealName:'',
    customerCategory: '',
    leaveCaseFlag: '',
    followInTime: [],
    outEndDate:[],
    outTimeDate:[],
    followUpTime:[],
  };

  private collectionDataList: any[] = []; //数据列表
  private selectionList: any[] = []; //选中数据
  private caseIds: any[] = []; //选择的案件号数组
  private importFlag: any = ''; //选择导入标识

  private mounted() {
    this.refreshData();
    this.getProvinces();
  }

  //获取省数据
  private getProvinces() {
    this.proinviceList = CityService.getCityData({ level: 1 });
  }

  //获取市
  private getCitys(provinceId) {
    if(this.queryModel.cityCode){
      this.queryModel.cityCode=''
    }
    this.cityList = this.$city.getCityData({ level: 1, id: provinceId }); // 城市列表
  }

  private refreshData() {
    this.selectionList = []
    // 默认加载列表
    this.outsourceCollectionService.earchCaseOutList(this.queryModel,this.pageService).subscribe(
      (data) => {
        this.collectionDataList = data;
        if(this.collectionDataList){
          this.collectionDataList.forEach(x=>{
            x.overduePeriod>12?x.overduePeriod = 'M12+':x.overduePeriod = 'M'+x.overduePeriod
          })
        }
      }
    );
  }
  //模板导出
  private exportTemplateInfo(val) {
    this.systemParamService
      .getTemplateUrl(val)
      .subscribe(data => this.$common.downloadFile(data));
  }
  // 关闭弹框
  private close() {
    const upload: any = this.$refs['upload_case_import'];
    upload.reset();
    this.dialog.uploadFile = false;
  }
  // 导入电催跟进
  private commit() {
    if (this.fileList.length === 0) {
      this.$message('请上传导入文件');
      return;
    }
    const query = {
      fileId: this.fileList[0].response.id,
    };
    if (this.importFlag === 'importMobileUrge') {
      // 导入电催跟进
      this.outsourceCollectionService.importMobileUrge(query).subscribe(
        (data) => {
          console.log(data,"hhhhhh")
//          this.dialog.uploadFile = false;
          this.close();
          this.refreshData();
          if(data.length !== 0){
              this.$message.info('存在导入失败的案件号');
          }else {
              this.$message.success('导入成功');
          }
        }
      );
    } else if (this.importFlag === 'importOutVisit') {
      // 导入外访跟进
      this.outsourceCollectionService.importOutVisit(query).subscribe(
        (data) => {
//          this.dialog.uploadFile = false;
          this.close();
          this.refreshData();
          if(data.length !== 0){
              this.$message.info('存在导入失败的案件号');
          }else {
              this.$message.success('导入成功');
          }
        }
      );
    } else if (this.importFlag === 'importOutVisitEnclosure') {
      // 导入外访附件
      this.outsourceCollectionService.importOutVisitEnclosure(query).subscribe(
        (data) => {
          this.dialog.uploadFile = false;
          this.refreshData();
        }
      );
    }else if(this.importFlag==='importContact'){
      console.log(this.importFlag,'importFlag')
      // 导入联系人信息
      this.outsourceCollectionService.importLinkman(query).subscribe(
        (data)=>{
          this.close();
          this.refreshData();
          if(data.length !== 0){
              this.$message.info('存在导入失败的案件号');
          }else {
              this.$message.success('导入成功');
          }
        }
      )
    }
  }
  //回收案件
  private caseRecoveryClick() {
    if (this.selectionList.length === 0) {
      this.$message.info('请选择要回收的案件');
      return;
    }

    const caseIds: any[] = this.selectionList.map((v) => v.id);
    const query = {
      caseIds,
    };
    this.outsourceCollectionService.caseRecovery(query).subscribe(
      (data) => {
        this.$message.success('回收案件成功!');
        this.refreshData();
      }
    );
  }
  //留案
  private caseStayClick() {
    if (this.selectionList.length === 0) {
      this.$message.info('请选择需要留案的案件');
      return;
    }
    this.dialog.leaveCase = true;
  }
  //取消留案
  private unCaseStayClick() {
    if (this.selectionList.length === 0) {
      this.$message.info('请选择需要取消留案的案件');
      return;
    }
    const caseIds: any[] = this.selectionList.map((v) => v.id);
    const query = {
      caseIds,
    };
    this.outsourceCollectionService.unCaseStay(query).subscribe(
      (data) => {
        this.$message.success('取消留案成功!');
        this.refreshData();
      }
    );
  }
  //导入电催跟进
  private importMobileUrgeClick() {
    this.dialog.uploadFile = true;
    this.importFlag = 'importMobileUrge';
  }
  //导入外访跟进
  private importOutVisitClick() {
    this.dialog.uploadFile = true;
    this.importFlag = 'importOutVisit';
  }
  //导入外访附件
  private importOutVisitEnclosureClick() {
    this.dialog.uploadFile = true;
    this.importFlag = 'importOutVisitEnclosure';
  }
  /**
   * 导入联系人信息
   */
  private importContactClick(){
    this.dialog.uploadFile = true;
    this.importFlag='importContact';
  }
  /**
   * 导出案件
   */
  private exportCaseClick(){
    const ids =this.selectionList? this.selectionList.map((v) => v.id):'';
    const request: any = this.queryModel;
    request.caseIds = ids;
    this.outsourceCollectionService.downCaseInfoOutVisits(request).subscribe(data=>{
      this.$message.success("导出成功!");
       window.open(data.url);
    })

  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.openCollectionExecution(new OpenExecutionData(row.id, row.caseNumber, CASE_CHANNEL.OUTER, true,true))
  }
  /**
   * 重置numberRange
   */
  private follFeedback() {
    this.queryModel.overdueAmount = { min: '', max: '' };
    this.queryModel.overdueDays = { min: '', max: '' };
    this.queryModel.proinviceCode = '';
    this.queryModel.cityCode = '';
    this.queryModel.outsourceId='';
  }
}
</script>

<style lang="less" >
.btn-group {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
.btn{
  padding:0 10px!important;
}
</style>
